﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Overview</title>
    <link href="~/lib/layui2.5.6/css/layui.css" rel="stylesheet" />
    <link href="~/css/site.css" rel="stylesheet" asp-append-version="true" />
    <style type="text/css">
        .data-card {
            height:110px;
            margin:8px;
            color:#fff;
        }
        .data-card-num {
            font-size:35px;
            line-height:30px;
            padding-top:30px;
            text-indent:30px;
        }
        .data-card-title {
            font-size: 15px;
            line-height: 30px;
            text-indent: 30px;
        }
        .color-text {
            color: #6bb4fb;
        }
        .color-text-green {
            color: #009688;
        }
        .bgcolor-blue {
            background-color: #6bb4fb;
        }
        .bgcolor-orange {
            background-color: #fac158;
        }
        .bgcolor-red {
            background-color: #fa713e;
        }
        .article li {
            line-height:28px;
        }
        .article-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .article-date {
            text-align:right;
        }
    </style>
</head>
<body>
    <div class="page-nav">首页 > 概览</div>
    <div style="padding: 10px 10px 20px 10px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">实时数据</div>
                    <div class="layui-card-body" style="height:130px;">
                        <div class="layui-col-space15">
                            <div class="layui-col-md4">
                                <div class="data-card bgcolor-blue">
                                    <div class="data-card-num" id="numNew">-</div>
                                    <div class="data-card-title">新闻数</div>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="data-card bgcolor-orange">
                                    <div class="data-card-num" id="numNotice">-</div>
                                    <div class="data-card-title">公告数</div>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="data-card bgcolor-red">
                                    <div class="data-card-num" id="numUser">-</div>
                                    <div class="data-card-title">用户</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">系统信息</div>
                    <div class="layui-card-body" style="height:130px;">
                        <div style="margin-left:25px;line-height:30px;margin-top:17px;">
                            系统日期：@DateTime.Now.ToString("yyyy-MM-dd")
                            <br />
                            系统版本号：V@{@GetType().Assembly.GetName().Version.ToString()}
                            <br />
                            当前登录环境：<span style="color:green;font-weight:700">安全</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">登录统计</div>
                    <div class="layui-card-body" style="height:280px;">
                        <div id="divLoginChart" style="width: 100%;height:300px;margin:0px auto;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">用户分布</div>
                    <div class="layui-card-body" style="height:280px;">
                        <div id="divSexChart" style="width: 100%;height:300px;margin:0px auto;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">新闻</div>
                    <div class="layui-card-body" style="height:200px;">
                        <ul id="listNew" class="article">
                            @*<li>
                                <div class="layui-col-md9 article-title"><a href="#">金卡戴珊副科级看京东方</a></div>
                                <div class="layui-col-md3 article-date">2021-05-14</div>
                            </li>
                            <li>
                                <div class="layui-col-md9 article-title"><a href="#">金卡戴珊副科级看京东方</a></div>
                                <div class="layui-col-md3 article-date">2021-05-14</div>
                            </li>*@
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">公告</div>
                    <div class="layui-card-body" style="height:200px;">
                        <ul id="listNotice" class="article">
                            @*<li>
                                <div class="layui-col-md9 article-title"><a href="#">金卡戴珊副科级看京东方</a></div>
                                <div class="layui-col-md3 article-date">2021-05-14</div>
                            </li>
                            <li>
                                <div class="layui-col-md9 article-title"><a href="#">金卡戴珊副科级看京东方</a></div>
                                <div class="layui-col-md3 article-date">2021-05-14</div>
                            </li>*@
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">登录信息</div>
                    <div class="layui-card-body" style="height:200px;">
                        <div style="margin-left:25px;">
                            <div class="layui-row">你好，当前登录用户 <span class="color-text" id="spanUserName">-</span>，共登录 <span class="color-text" id="spanLoginTime">-</span> 次系统。</div>
                            <br />
                            <ul class="layui-timeline" id="listMyLogin">
                                @*<li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        2020-04-05 12:45:36 登录系统
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        2020-04-05 12:45:36 登录系统
                                    </div>
                                </li>*@
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">...</i>
                                    <div class="layui-timeline-content layui-text">
                                        (<a href="/person/index?tab=tab-logrecord" target="mainpage">详细登录日志</a>)
                                    </div>
                                </li>
                            </ul>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="~/lib/echarts4.2.0/echarts.common.min.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/layui2.5.6/layui.js"></script>
    <script type="text/javascript">
        var Overview = function () {
            var _data = {
                inited: false,
            };

            var initData = function () {
                initCurrentData();
                initLoginData();
                initUserData();
                initNewData();
                initNoticeData();
                initMyLoginData();
            }

            //初始当前数据
            var initCurrentData = function () {
                $.ajax({
                    url: "/Home/GetCurrentData",
                    type: "GET",
                    success: function (data) {
                        $("#numNew").html(data.newNum);
                        $("#numNotice").html(data.noticeNum);
                        $("#numUser").html(data.userNum.toLocaleString());
                    }
                });
            }
            //初始登录统计
            var initLoginData = function () {
                $.ajax({
                    url: "/Home/GetLoginStatistics",
                    type: "GET",
                    success: function (data) {
                        //折线图
                        //var dataDateList = ["06-20", "06-21", "06-22", "06-23", "06-24", "06-25", "06-26", "06-27", "06-28", "06-29"];
                        //var dataUVList = [5, 5, 20, 25, 10, 10, 20, 23, 26, 33];
                        var dataDateList = data.dateList;
                        var dataValueList = data.valueList;
                        var loginChart = echarts.init(document.getElementById('divLoginChart'));
                        var optionLogin = {
                            tooltip: {},
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: dataDateList
                            },
                            yAxis: {},
                            series: [{
                                type: 'line',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                data: dataValueList
                            }]
                        };
                        loginChart.setOption(optionLogin);
                    }
                });
            }
            //初始用户分布
            var initUserData = function () {
                $.ajax({
                    url: "/Home/GetUserDistribution",
                    type: "GET",
                    success: function (data) {
                        //饼形图
                        var sexChart = echarts.init(document.getElementById('divSexChart'));
                        var optionSex = {
                            title: {
                                show: false
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                            },
                            series: [
                                {
                                    //name: '',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    data: [
                                        { value: data.manNum, name: '男' },
                                        { value: data.womanNum, name: '女' },
                                    ]
                                }
                            ],
                            color: ['#6bb4fb', '#fac158']
                        };
                        sexChart.setOption(optionSex);
                    }
                });
                
            }
            //初始新闻
            var initNewData = function () {
                $.ajax({
                    url: "/Home/GetArticleList?type=1&num=7",
                    type: "GET",
                    success: function (data) {
                        $.each(data, function (index, item) {
                            $("#listNew").append(`
                                <li>
                                    <a href="/Article/ViewArticle?id=${item.id}">
                                    <div class="layui-col-md9 article-title">${item.title}</div>
                                    <div class="layui-col-md3 article-date">${item.createTimeText}</div>
                                    </a>
                                </li>
                                `);
                        });
                    }
                });
            }
            //初始公告
            var initNoticeData = function () {
                $.ajax({
                    url: "/Home/GetArticleList?type=2&num=7",
                    type: "GET",
                    success: function (data) {
                        $.each(data, function (index, item) {
                            $("#listNotice").append(`
                                <li>
                                    <a href="/Article/ViewArticle?id=${item.id}">
                                    <div class="layui-col-md9 article-title">${item.title}</div>
                                    <div class="layui-col-md3 article-date">${item.createTimeText}</div>
                                    </a>
                                </li>
                                `);
                        });
                    }
                });
            }
            //初始登录信息
            var initMyLoginData = function () {
                $.ajax({
                    url: "/Home/GetMyLoginData",
                    type: "GET",
                    success: function (data) {
                        $("#spanUserName").html(data.userName);
                        $("#spanLoginTime").html(data.loginTime);

                        $.each(data.loginList, function (index, item) {
                            $("#listMyLogin").prepend(`
                                <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">${item} 登录系统</div>
                                </li>
                                `);
                        });
                    }
                });
            }

            return {
                init() {//初始化
                    if (!_data.inited) {
                        initData();
                        _data.inited = true;
                    }
                },
            }
        }();
        Overview.init();
    </script>
</body>
</html>
